<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <link href="./css/zhu.css" rel="stylesheet">
    <!--    <style>-->
    <!--        .logo{-->
    <!--            background-image: url(img/logo.jpg);-->
    <!--            width: 1400px;-->
    <!--            height: 150px;-->
    <!--            margin: 0 auto;-->
    <!--        }-->
    <!--        .daohang{-->
    <!--            margin: 0 auto;-->
    <!--            background-color: #adff2f;-->
    <!--            width: 1400px;-->
    <!--            height: 50px;-->
    <!--        }-->
    <!--        .loin{-->
    <!--            width: 40px;-->
    <!--            height: 20px;-->
    <!--            margin-top: 110px;-->
    <!--            margin-left: 1300px;-->
    <!--            display: inline-block;-->
    <!--        }-->
    <!--        .loin2{-->
    <!--            width: 40px;-->
    <!--            height: 20px;-->
    <!--            /*margin-top: -20px;*/-->
    <!--            /*margin-left: 1350px;*/-->
    <!--            display: inline-block;-->
    <!--        }-->
    <!--        .daohang-a{-->
    <!--            text-decoration: none;-->
    <!--            background-color: #FAFCFE;-->
    <!--            width: 229.2px;-->
    <!--            height: 50px;-->
    <!--            display: inline-block;-->
    <!--            text-align: center;-->
    <!--            line-height: 50px;-->
    <!--            font-size: 20px;-->
    <!--            font-family: MicrosoftYaHei;-->
    <!--            font-weight: bold;-->
    <!--            color: #000000;-->
    <!--        }-->
    <!--        .tail{-->
    <!--            background-image: url(./img/tail.jpg);-->
    <!--            width: 1520px;-->
    <!--            height: 350px;-->
    <!--        }-->
    <!--        .tail-1{-->
    <!--            width: 200px;-->
    <!--            height: 100px;-->
    <!--            margin-top: 10px;-->
    <!--            margin-left: 70px;-->
    <!--        }-->
    <!--        .colorwhite{-->
    <!--            color: #FAFCFE;-->
    <!--            text-decoration: none;-->
    <!--        }-->
    <!--        .tail-2{-->
    <!--            width: 500px;-->
    <!--            height: 30px;-->
    <!--            text-align: center;-->
    <!--            line-height: 30px;-->
    <!--            margin-top: 150px;-->
    <!--            margin-left: 500px;-->
    <!--        }-->
    <!--    </style>-->
    <style>
        .ul{
            margin-top: 20px;
            padding: 10px;
            width: 200px;
            background-color: white;
            margin-bottom: 20px;
            margin-right: 10px;
        }
        .ul .up{
            display: flex;
            align-items: center;
        }
        /*.down{*/
        /*    margin-top: 20px;*/
        /*    margin-bottom: 20px;*/
        /*}*/
        /*.left{*/
        /*    display: flex;*/
        /*}*/
        .left > div{
            margin-right: 20px;
        }
        /*.rgiht{*/

        /*}*/
        .title{
            background-color: goldenrod;
            color: white;
            display: inline-block;
            padding: 10px 20px;
            border-radius: 10px;
            margin-top: 20px;
        }
        .rightBox{
            display: flex;
            flex-wrap: wrap;
            min-height: 150px;

        }

        .mainBOx{
            width: 1400px;
            margin: auto;

        }
        .titleBox{
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        * {
            margin: 0px;/*设置一个元素所有外边距的宽度*/
            padding: 0px;/*设置元素所有内边距的宽度*/
            /*text-align: center;!*规定元素中的文本的水平对齐方式。*!*/
        }
        #banner {
            width: 1400px;
            height: 410px;
            margin: 0 auto;
            position: relative; /*相对定位,相对于.btn按钮*/
            text-align: left;
        }
        .pic image {
            display: block; /*默认有图片不显示*/
            width: 50%;
            height: 50%;
            position: relative; /*相对定位.对应的是.pic这个div*/
            top: 0px;
            left: 0px;
        }
        .pic a {
            display: none;

        }
        .pic { /*专门显现图片区*/
            position: relative; /*相对定位.对应.pic img*/
            border: 1px solid red;
            height: 410px;
        }
        .btn {
            width: 120px;
            height: 5%;
            position: absolute; /*绝对定位相对于banner div*/
            top: 350px;
            left: 640px;
            /*bottom: 5px;*/
            /*right: 5px;*/
        }
        .btn ul li {
            background-color: #000000; /*黑色*/
            color: #ffffff;
            list-style-type: none;
            width: 18px;
            height: 18px;
            float: left;
            border-radius: 9px; /*变成圆的*/
            text-align: center;
            line-height: 18px;
            cursor: pointer; /*鼠标移动变手指状态*/
            margin-left: 5px;
        }
        .btn ul li.one {
            background-color: #ff9966;
        }

    </style>
</head>
<body bgcolor="#adff2f">

<div class="logo" id="logo">
    <a class="loin" target="_blank" href="denglu.html" >登录</a>
    <a class="loin2" target="_blank" href="zhuce.html">注册</a>

</div>

<!--导航-->
<div class="daohang">
    <a class="daohang-a" href="index.html">首页</a>
    <a class="daohang-a" href="sdfz.html">生态法制</a>
    <a class="daohang-a" href="xinwen.html">新闻</a>
    <a class="daohang-a" href="ziyuanku.html">资源库</a>
    <a class="daohang-a" href="denglu.html">登录</a>
    <a class="daohang-a" href="zhuce.html">注册</a>
    <a class="daohang-a" href="./about%20us.html">关于我们</a>
</div>
<!--滚动图片-->
<div id="banner">
    <div class="pic">
        <a href="#" style="display:block"><img alt="" src="./img/g05(1).png" /></a>
        <a href="#"><img alt="" src="./img/g01(1).png" /></a>
        <a href="#"><img alt="" src="./img/g02(1).png" /></a>
        <a href="#"><img alt="" src="./img/g03(1).png" /></a>
        <a href="#"><img alt="" src="./img/g04(1).png" /></a>
    </div>
    <div class="btn">
        <ul>
            <li class="one">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
    </div>
</div>
<script type="text/jscript" src="./js/jquery.min.js"></script>
<script type="text/jscript">
    $(function () {
        $("#all li").mouseover(function () {//鼠标进入离开事件
            $(this).css("background-color", "#ff00ff").siblings().css("background-color", "white");
        $(this).css({ "background-color": "red", "font-size": "9px" }).siblings().hide();
    });
$(window).scroll(function () {//鼠标滚动事件
    var _top = $(window).scrollTop(); //获得鼠标滚动的距离
    });
          //手动播放图片
          $(".btn ul li").hover(function () {
              $(this).addClass("one").siblings().removeClass("one");
              index = $(this).index();
              i = index;
              $(".pic a").eq(index).stop().fadeIn(500).show().siblings().stop().fadeIn(500).hide();
          });
          //自动播放图片
          var i = 0;
          var t = setInterval(autoplay, 3000);
          function autoplay() {
              i++;
              if (i > 4) i = 0;
              $(".btn ul li").eq(i).addClass("one").siblings().removeClass("one");
              $(".pic a").eq(i).stop().fadeIn(500).show().siblings().stop().fadeIn(500).hide();
          }
          $("#banner").hover(function () {
              clearInterval(t);
          }, function () {
              t = setInterval(autoplay, 3000);
          });
      });
</script>


<!--珍惜动物图片搜索框-->
<div class="mainBOx">

    <div class="rgiht">
        <div class="titleBox">
            <div class="title">珍惜动物图片</div>
            <div>
                <input id="dwName" placeholder="请输入动物名称"/>
                <button onclick="find()">确定</button>
            </div>
        </div>
        <div class="rightBox" id="rightBox">
            <!--<div class="ul">
                <div class="up">
                    <img src="img/09.jpg" width="100%" height="150px"/>
                </div>
                <div style="text-align: center;"><a href="https://baike.baidu.com/item/%E6%A2%85%E8%8A%B1%E9%B9%BF/53120">梅花鹿</a></div>
            </div>
           <div class="ul">
                <div class="up">
                    <img src="img/10.jpg" width="100%" height="150px"/>
                </div>
                <div style="text-align: center;"><a href="https://baike.baidu.com/item/%E8%B5%A4%E7%8B%90/618342?fromModule=lemma_search-box">赤狐</a></div>
            </div>
            <div class="ul">
                <div class="up">
                    <img src="img/11.jpg" width="100%" height="150px"/>
                </div>
                <div style="text-align: center;"><a href="https://baike.baidu.com/item/%E9%BB%84%E5%96%89%E5%99%AA%E9%B9%9B?fromModule=lemma_search-box">黄喉噪鹛</a></div>
            </div>
            <div class="ul">
                <div class="up">
                    <img src="img/12.jpg" width="100%" height="150px"/>
                </div>
                <div style="text-align: center;"><a href="https://baike.baidu.com/item/%E7%BA%A2%E8%85%B9%E9%94%A6%E9%B8%A1?fromModule=lemma_search-box">红腹锦鸡</a></div>
            </div>
            <div class="ul">
                <div class="up">
                    <img src="img/13.jpg" width="100%" height="150px"/>
                </div>
                <div style="text-align: center;"><a href="https://baike.baidu.com/item/%E9%BA%8B%E9%B9%BF/61983741?fromModule=lemma_search-box">麋鹿</a></div>
            </div>
            <div class="ul">
                <div class="up">
                    <img src="img/14.jpg" width="100%" height="150px"/>
                </div>
                <div style="text-align: center;"><a href="https://baike.baidu.com/item/%E6%9C%B1%E9%B9%AE/157704?fromModule=lemma_search-box">鹮朱</a></div>
            </div>
            <div class="ul">
                <div class="up">
                    <img src="img/15.jpg" width="100%" height="150px"/>
                </div>
                <div style="text-align: center;"><a href="https://baike.baidu.com/item/%E5%84%92%E8%89%AE/584845">儒艮</a></div>
            </div>
            <div class="ul">
                <div class="up">
                    <img src="img/16.jpg" width="100%" height="150px"/>
                </div>
                <div style="text-align: center;"><a href="https://baike.baidu.com/item/%E5%9B%9B%E7%88%AA%E9%99%86%E9%BE%9F?fromModule=lemma_search-box">四爪陆龟</a></div>
            </div>
            <div class="ul">
                <div class="up">
                    <img src="img/17.jpg" width="100%" height="150px"/>
                </div>
                <div style="text-align: center;"><a href="https://baike.baidu.com/item/%E5%A4%A7%E9%B2%B5/481312?fromtitle=%E5%A4%A7%E9%B2%B5%EF%BC%88%E5%A8%83%E5%A8%83%E9%B1%BC%EF%BC%89&fromid=3368306&fromModule=lemma_search-box">大鲵（娃娃鱼）</a></div>
            </div>
            <div class="ul">
                <div class="up">
                    <img src="img/18.jpg" width="100%" height="150px"/>
                </div>
                <div style="text-align: center;"><a href="https://baike.baidu.com/item/%E7%8E%B3%E7%91%81/75376?fromModule=lemma_search-box">玳瑁</a></div>
            </div>
            <div class="ul">
                <div class="up">
                    <img src="img/19.jpg" width="100%" height="150px"/>
                </div>
                <div style="text-align: center;"><a href="https://baike.baidu.com/item/%E9%87%91%E4%B8%9D%E7%8C%B4/37026?fromModule=lemma_search-box">金丝猴</a></div>
            </div>
            <div class="ul">
                <div class="up">
                    <img src="img/20.jpg" width="100%" height="150px"/>
                </div>
                <div style="text-align: center;"><a href="https://baike.baidu.com/item/%E7%99%BD%E9%A2%88%E9%95%BF%E5%B0%BE%E9%9B%89?fromModule=lemma_search-box">白颈长尾雉</a></div>
            </div>-->
        </div>
    </div>
</div>


<div style="width: 1400px;margin: 0 auto;">
<!--    <h1>保护珍稀动物的意义和作用</h1>-->
    <div class="title">保护珍稀动物的意义和作用</div>
    <p>保护珍稀动物可以更好的维持生物的多样性.珍稀动物是全人类共有的宝贵财富.生态系统中物种越丰富,它的创造力就越大.自然界的所有生物都是互相依存,互相制约的.每一种物种的绝迹,都预示着很多物种即将面临死亡.保护生物链条,才能更好的维系生态平衡。许多珍稀动物生物具有重要的科学研究价值.每一个物种都具有独特的作用.这些野生动植物如果绝迹,是人类的重大损失.动物是人类亲密的朋友,尤其是珍稀动物的存在使整个世界变得丰富.</p>
<!--    <h1>中国珍稀动物现状</h1>-->
    <div class="title">中国珍稀动物现状</div>
    <p>中国是濒危动物分布大国。据不完全统计，仅列入《濒危野生动植物种国际贸易公约》附录的原产于中国的濒危动物有120多种(指原产地在中国的物种)，列入《国家重点保护野生动物名录》的有257种，列入《中国濒危动物红皮书》的鸟类、两栖爬行类和鱼类有400种，列入各省、自治区、直辖市重点保护野生动物名录的还有成百上千种。 20世纪80年代以来，中国进口了不少动物，如湾鳄、暹罗鳄、食蟹猴、黑猩猩、非洲象等。这些外来的濒危动物，也受到国家的重点保护。由于我国人口众多，活动范围广，使许多珍贵的野生动物被迫退缩残存在边远的山区、森林、草原、沼泽、荒漠等地区，分布区极其狭窄。随着经济的持续快速发展和生态环境的日益恶化，中国的濒危动物种类还会增加。</p>
</div>
<div class="tail">
    <div class="tail-1">
        <h4 class="colorwhite">参考链接</h4>
        <hr>
        <a class="colorwhite" href="http://cwca.org.cn/" >中国野生动物保护协会</a>
    </div>
    <div class="tail-2 colorwhite">
        24组Java实训作业|联系方式：xxxxxxxxxxx
        <p class="colorwhite">2022|中国珍稀野生动物</p>
    </div>
    <!--    <div class="tail-2 colorwhite">2022|中国珍稀野生动物<div>-->
</div>
<script src="js/jquery.min.js"></script>
<script>
   let user = sessionStorage.getItem("user");
   if(user){
       let name=JSON.parse(user).name;
       document.getElementById("logo").innerHTML="<span class='loin'>欢迎登录:"+name+"</span>";
   }else{

   }
    function find(){
        var dwName=document.getElementById("dwName").value;
        $.ajax({
            url:"/dwFinds",
            method:"post",
            data:{
                dwName,
            },
            success:function(result){
                console.log();
                let arr=JSON.parse(result);
                let html="";
                for(var i=0;i<arr.length;i++){
                    html+=`<div class="ul">
                        <div class="up">
                         <img src="${arr[i].dwImg}" width="100%" height="150px"/>
                        </div>
                         <div style="text-align: center;"><a href="${arr[i].dwUrl}">${arr[i].dwName}</a></div>
                     </div>
                    `
                }
                document.getElementById("rightBox").innerHTML=html;
           /* */
            }
        });
    }
    find();

</script>
</body>
</html>